import React,{Component} from 'react';
import ReactSwipe from 'react-swipe';
import './banner.scss';
export default class Banner extends Component{
  constructor (props) {
    super(props)
    this.state = {
      index: 0
    }
  }
  next () {
    console.log(this)
  }
  componentDidMount(){
  }
  addClass (event) {
    this.setState({
        index: event
    })
  }
  render() {
        return (
          <div>
            <ReactSwipe className="carousel banner" key={this.props.bannerList.length} swipeOptions={{ callback: this.addClass.bind(this), spd: 400, auto: 1000,continuous: true, autoplayDisableOnlnteraction:false, disableOnInteraction:false}}>
              {this.props.bannerList.map((item, index) => {
                return (<div className="aa" key={index}><img src={item.pit_img_url}/></div>)
              })}
            </ReactSwipe>
            <ul id="icon">
              {
                this.props.bannerList.map((item, i) => {
                  return <li className={`${i === this.state.index && 'on'}`} key={i}></li>
                })
              }
            </ul>
          </div>
        );
    }
}
